<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.3,initial-scale=1,user-scalable=no">
    <!--<meta name="robots" content="index, follow" />-->
    <title>移动端首页</title>
    <link href="../static/css/firstMobile.css" th:href="@{/css/firstMobile.css}" rel="stylesheet"/>
    <link href="../static/css/swiper.min.css" th:href="@{/css/swiper.min.css}" rel="stylesheet"/>
    <!--swiper-->
</head>
<body>
    <div class="AD1">
        <div class="header">
            <div class="header-ct">
                <img th:src="@{/img/mobile/logo.png}" alt="图片加载中...">
                <span>食堂订餐助手</span>
            </div>
            <div class="header-ct">
                <img th:src="@{/img/mobile/icon_phone.png}" alt="图片加载中...">
                <span2>020-36523365</span2>
            </div>
        </div>
        <div class="main">
            <div class="main-top">
                <div class="swiper-container" style="width: 100%;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img th:src="@{/img/mobile/banner1.png}" alt="" style="width: 100%;"></div>
                        <div class="swiper-slide"><img th:src="@{/img/mobile/banner2.png}" alt="" style="width: 100%;"></div>
                        <div class="swiper-slide"><img th:src="@{/img/mobile/banner3.png}" alt="" style="width: 100%;"></div>
                    </div>
                    <!--&lt;!&ndash;左右按钮&ndash;&gt;-->
                    <!--<div class="swiper-button-next"2></div>-->
                    <!--<div class="swiper-button-prev"></div>-->
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="main0">
                <div class="from-content">
                    <form name="input" action="html_form_action.php" method="get">
                        <p>登录订餐平台</p>
                        <input class="btn1" placeholder="请输入公司账号"><br>
                        <input class="btn1" placeholder="请输入个人账号"><br>
                        <input class="btn1" placeholder="请输入密码"><br>
                        <div><a href="#">忘记密码？</a></div>
                        <input type="submit" class="submit" value="登录">
                    </form>
                </div>

            </div>

            <div class="main1">
                <h3>厉行节约、反对浪费</h3>
                <img  class="touxiang"  th:src="@{/img/mobile/touxiang.png}" alt="图片加载中...">
                <div class="content1">
                    <div class="subc1">
                        <img th:src="@{/img/mobile/icon_yinhao.png}" alt="图片加载中...">
                        <p><span>习近平</span><span>国家主席</span></p>
                    </div>
                    <p>要加大宣传引导力度，大力弘扬中华民族勤俭节约的优秀传统，大力宣传节约光荣、浪费可耻的思想观念，努力使厉行节约、反对浪费在全社会蔚然成风。</p>
                </div>
            </div>

            <div class="main2">
                <h3>订餐三部曲</h3>
                <p>通过职工预先报餐、食堂统筹按量备餐的方式，有效的减少浪费，帮助政府机构、企事业单位落实《党政机关厉行节约反对浪费条例》，树立良好的反对浪费崇尚节俭形象</p>
                <div class="m2-content">
                    <img th:src="@{/img/mobile/icon_tiqianbaocan.png}" alt="">
                    <p>提前报餐</p>
                    <p>提前向食堂报餐,选取喜欢的菜品。</p>
                </div>
                <div class="m2-content">
                    <img th:src="@{/img/mobile/icon_shitangbeican.png}" alt="">
                    <p>食堂备餐</p>
                    <p>食堂根据报餐统计表备餐，减少浪费</p>
                </div>
                <div class="m2-content">
                    <img th:src="@{/img/mobile/icon_saomaqucan.png}" alt="">
                    <p>扫码取餐</p>
                    <p>职工到食堂扫码领取自己预订的菜品</p>
                </div>
            </div>

            <div class="main3">
                <h3>食堂的好管家</h3>

                <div class="m3-wrap">
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_shuliang.png}" alt="">
                        <h6>订餐数量提前知</h6>
                        <p>自动按餐别、菜品统计订餐份数，按量准备饭菜，拒绝浪费</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_baobiao.png}" alt="">
                        <h6>各种报表自动出</h6>
                        <p>订餐明细表、人员统计、部门统计、菜品统计、订餐未食统计...</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_changku.png}" alt="">
                        <h6>仓库管理很方便</h6>
                        <p>管理后厨仓库的出库入库，随时查看库存情况</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_zhanghuguanli.png}" alt="">
                        <h6>职工账号轻松管</h6>
                        <p>管理职工餐卡账户，支持单位补贴充值，随时查看账户余额及明细</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_gonggao.png}" alt="">
                        <h6>食堂公告在线发</h6>
                        <p>在线发送食堂公告，还可查看阅读情况</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_kecan.png}" alt="">
                        <h6>客餐围餐统统有</h6>
                        <p>支持订客餐、订围餐，可设置订餐权限，并实时查看订餐明细</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_guizhe.png}" alt="">
                        <h6>就餐规则由你定</h6>
                        <p>管理订餐规则，包括就餐时间、是否要求充值支付、权限设置等</p>
                    </div>
                    <div class="m3-content">
                        <img th:src="@{/img/mobile/icon_xingxiang.png}" alt="">
                        <h6>创建食堂好形象</h6>
                        <p>以人为本，方便了职工,同时又落实了《党政机关厉行节约反对浪费条例》</p>
                    </div>
                </div>
            </div>

            <div class="main4">
                <h3>职工的好助手</h3>
                <div class="m4-content">
                    <img th:src="@{/img/mobile/baocan.png}" alt="">
                    <h3>报餐很方便</h3>
                    <p>随时随地在手机上报餐，可设置自动提醒，再也不担心忘记报餐了</p>
                </div>
                <div class="m4-content">
                    <img th:src="@{/img/mobile/xihuande.png}" alt="">
                    <h3>吃自己喜欢的</h3>
                    <p>提前知道每餐的菜单并预订自己喜欢的，不用担心去晚了菜没了</p>
                </div>
                <div class="m4-content">
                    <img th:src="@{/img/mobile/chankanyue.png}" alt="">
                    <h3>随时查看账户余额</h3>
                    <p>若需要充值就餐，可随时查看自己的账户余额</p>
                </div>
            </div>

            <div class="main5">
                <div class="m5-top">
                    <p>现在购买，赠送一台双屏电脑</p>
                </div>
                <div class="m5-ping">
                    <img th:src="@{/img/mobile/computer1.png}" alt="">
                    <img th:src="@{/img/mobile/computer2.png}" alt="">
                </div>
                <div class="m5-bottom">
                    <div class="m5-subc">
                        <img th:src="@{/img/mobile/Oval 3 Copy 2.png}" alt="">
                        <p>主屏</p>
                    </div>
                    <p>打餐人员通过主屏查看就餐者预订的菜品</p>
                </div>
                <div class="m5-bottom">
                    <div class="m5-subc">
                        <img th:src="@{/img/mobile/Oval 3 Copy.png}" alt="">
                        <p>副屏</p>
                    </div>
                    <p>职工通过副屏扫码取餐</p>
                </div>
            </div>

            <div class="main6">
                <div class="m6-top">
                    <h3>功能齐全</h3>
                    <p>专为内部食堂订制</p>
                </div>
                <img th:src="@{/img/mobile/dingcanhoiutai.png}" alt="图片加载中...">
                <h4>订餐后台</h4>
                <div class="m6-content">
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>菜品管理:上传菜品信息</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>菜单管理:管理常用的菜单，方便每日排菜</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>每日排餐:设置每天、每餐的菜品</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>报餐明细:查看每餐的报餐记录</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>菜品统计:按菜品统计预订的份数，按量备餐</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>每日统计:统计每天的报餐量、实际就餐量</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>部门统计:按部门统计报餐量、实际就餐量</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>人员统计:按人员统计报餐量、实际就餐量</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>围餐明细:查看报围餐的情况</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>后厨仓库:管理厨房仓库的进、出、库存</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>财务管理:管理职工餐卡余额、充值</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>食材采购:管理厨房食材采购记录</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>食堂公告:向就餐人员发送公告</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>就餐设置:设置用餐时间、报餐方式等</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>系统管理:管理就餐人员、部门、职位等</p>
                    </div>

                </div>
            </div>

            <div class="main7">
                <img th:src="@{/img/mobile/saomazongduan.png}" alt="图片加载中...">
                <h4>扫码就餐终端</h4>
                <p>为食堂提供双屏电脑，报餐人员通过副屏幕可以扫码领餐，食堂人员通过主屏幕可以时查看就餐者预订的菜品。</p>
            </div>

            <div class="main6">
                <img th:src="@{/img/mobile/zhigongshoujidun.png}" alt="图片加载中...">
                <h4>职工手机端</h4>
                <div class="m6-content">
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>菜品管理:上传菜品信息</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>菜单管理:管理常用的菜单，方便每日排菜</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>每日排餐:设置每天、每餐的菜品</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>报餐明细:查看每餐的报餐记录</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>菜品统计:按菜品统计预订的份数，按量备餐</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>每日统计:统计每天的报餐量、实际就餐量</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>部门统计:按部门统计报餐量、实际就餐量</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>人员统计:按人员统计报餐量、实际就餐量</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>围餐明细:查看报围餐的情况</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>后厨仓库:管理厨房仓库的进、出、库存</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>财务管理:管理职工餐卡余额、充值</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>食材采购:管理厨房食材采购记录</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>食堂公告:向就餐人员发送公告</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>就餐设置:设置用餐时间、报餐方式等</p>
                    </div>
                    <div class="m6-subc">
                        <img th:src="@{/img/mobile/icon.png}" alt="图片加载中...">
                        <p>系统管理:管理就餐人员、部门、职位等</p>
                    </div>

                </div>
            </div>

            <div class="footer1">
                <p>申请开通</p>
                <p>体验手机版</p>
            </div>

            <div class="footer2">
                <div>
                    <img th:src="@{/img/mobile/Shape.png}" alt="图片加载中...">
                    <p>咨询热线：020-36523365</p>
                </div>
                <p>粤ICP备18074564号1</p>
            </div>
        </div>
    </div>


    <!--swiper-->
    <script src="../static/js/icheck.min.js" th:src="@{/js/swiper.min.js}"></script>
    
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    </script>

    <script>
        // 通过document.body.clientWidth网页可见区域的宽度,window.screen.width获取设备宽度
        var offWidth = window.screen.width;
        document.getElementsByTagName("html")[0].style.fontSize = offWidth+ 'px'; //把rem的值复制给顶级标签html的font-size
        console.log('offWidth:'+offWidth,document.getElementsByTagName("html")[0].style.fontSize)
    </script>

</body>


</html>
